<template>
<header class="film-header">
  <div class="goBack" @click="$router.back(-1)">
    <img src="@/assets/images/arrow_left.png" alt="" />
  </div>
  <div class="title">{{ title }}</div>
</header>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";

.film-header {
  position: fixed!important;
  color: transparent;
  transition: all 0.3s ease;
  width: 100%;
  height: 0.44rem;
  line-height: 0.44rem;
  z-index: 1;
  text-align: center;
  background-color: transparent;
}
.show-header {
  color: #191a1b;
  background-color: #fff;
  transition: all .3s ease;
  @include border-b-1px(#ededed);
}
.goBack {
  position: absolute;
  top: 0.08rem;
  left: 0.08rem;
  width: 0.28rem;
  height: 0.28rem;
  padding: .02rem;
  background: rgba($color: #fff, $alpha: 0.7);
  border-radius: 50%;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
